import React from "react";
import { connect } from "react-redux";
import './playlist.scss';
import { withRouter } from "react-router";
import { GetHighPlayList, GetPlayListHotTags, GetPlayListTags, GetPlayList } from "../../api/Playlist/playlist";
import { Button, Space, Row, Col } from 'antd';
import {CaretRightOutlined, CrownOutlined} from "@ant-design/icons"

class PlaylistPage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            highPlayListsItem: null,
            hotTags: [],
            playlists: [],
            total: 0,
        };
        this.GetHighPlayOne = this.GetHighPlayOne.bind(this);
        this.GetHotTags = this.GetHotTags.bind(this);
        this.GetDefaultList = this.GetDefaultList.bind(this);
    }

    componentDidMount() {
        let defaultForm = {
            limit: 100,
        }
        this.GetHighPlayOne();
        this.GetHotTags();
        this.GetDefaultList(defaultForm);
    }


    GetDefaultList(params){
        GetPlayList(params).then(res => {
            const { code, playlists, total } = res;
            if(code === 200){
                this.setState({
                    playlists,
                    total
                });
            }else {

            }
        }).catch(() => {

        })
    }

    GetHotTags(){
        GetPlayListHotTags().then(res => {
            const { code, tags } = res;
            if(code === 200 ){
                this.setState({
                    hotTags: tags
                })
            }else {

            }
        }).catch(() => {

        })
    }

    GetHighPlayOne(){
        // 获取一个精品歌单
        let highForm = {
            limit: 1,
        }
        GetHighPlayList(highForm).then(res => {
            const { code, playlists } = res;
            if(code === 200){
                if(playlists.length > 0){
                    this.setState({
                        highPlayListsItem: playlists[0],
                    })
                }
            }else {

            }
        }).catch(() => {

        })
    }

    CreateHishOne(){
        const { highPlayListsItem } = this.state;
        if(highPlayListsItem){
            return <div className="highQuality_One">
                <div className="blur_bj">
                    <img src={highPlayListsItem.coverImgUrl} alt=""/>
                </div>
                <div className="blur_bj_gray" />
                <img className="One_Image" src={highPlayListsItem.coverImgUrl} alt=""/>
                <div className="One_Detail">
                    <div>
                        <Button shape={"round"} icon={<CrownOutlined/>} ghost>精品歌单</Button>
                    </div>
                    <div className="One_info">
                        <span className="name">{highPlayListsItem.name}</span>
                        <span className="copywriter">{highPlayListsItem.copywriter}</span>
                    </div>
                </div>
            </div>
        }
    }

    showPlayListDet(id){
        this.props.history.push('/PlayList/'+ id);
    }


    CompCount(value){
        if(parseInt(value) > 10000){
            return parseInt(value/10000) + '万'
        }else {
            return value
        }
    }

    render() {
        const { hotTags, playlists } = this.state;
        const showTags = [];
        const showPlayList = [];

        if(hotTags.length > 0){
            hotTags.map((r,index) => {
                showTags.push(
                    <Button key={index} type={"text"} className="HotTagsItem">
                        {r.name}
                    </Button>
                )
            })
        }


        if(playlists.length > 0){
            playlists.map((r,index) => {
                showPlayList.push(
                    <Col className="playlist_col">
                        <div onClick={() =>this.showPlayListDet(r.id)} key={index} itemID={r.id} className="HotRecommend-item">
                            <div className="coverImg">
                                <img src={r.coverImgUrl} alt="" />
                                <div className="Enter-Item">
                                    <CaretRightOutlined/>
                                </div>
                            </div>

                            <p className="item-title">{r.name}</p>
                            <span className="palyCount">
                              <CaretRightOutlined/>{this.CompCount(r.playCount)}
                            </span>

                        </div>
                    </Col>
                )
            })
        }


        return (
            <div className="PlayListPage">
                {/*精品歌单第一个*/}
                {this.CreateHishOne()}
                <div className="ScreenPlayListType">
                    <Button>全部歌单</Button>
                    <div className="TagsHotList">
                        <Space>
                            {showTags}
                        </Space>
                    </div>
                </div>
                <Row className="PlayLists_Box" gutter={24}>
                    {showPlayList}
                </Row>
            </div>
        )
    }


}

export default connect()(withRouter(PlaylistPage));